<template>
  <div class="batch-only-demo">
    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <el-card shadow="hover" class="search-card">
        <template #header>
          <div class="search-header">
            <div class="search-title">
              <el-icon><Search /></el-icon>
              <span>搜索与筛选</span>
            </div>
          </div>
        </template>
        <el-form :model="searchForm" class="search-form">
          <div class="search-form-content">
            <div class="search-form-fields">
              <el-form-item label="名称">
                <el-input
                  v-model="searchForm.name"
                  placeholder="请输入名称"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>
              
              <el-form-item label="状态">
                <el-select v-model="searchForm.status" placeholder="选择状态" clearable style="width: 120px">
                  <el-option label="全部" value="" />
                  <el-option label="启用" value="enabled" />
                  <el-option label="禁用" value="disabled" />
                </el-select>
              </el-form-item>
            </div>
            
            <div class="search-form-actions">
              <el-button type="primary" @click="handleSearch" class="search-btn">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
              <el-button type="warning" @click="handleReset" class="reset-btn">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </div>
          </div>
        </el-form>
      </el-card>
    </div>

    <!-- 批量操作工具栏（仅在有选中时显示）- 紧凑样式 -->
    <div class="batch-actions-bar" v-if="selectedItems.length > 0">
      <div class="batch-info-compact">
        <el-icon class="selected-icon"><Select /></el-icon>
        <span>已选择<strong>{{ selectedItems.length }}</strong>条记录</span>
      </div>
      <div class="batch-divider">|</div>
      <div class="batch-buttons-compact">
        <el-button type="warning" @click="handleBatchStop" class="batch-btn-compact">
          <el-icon><Remove /></el-icon>
          批量停止
        </el-button>
        <el-button type="success" @click="handleBatchStart" class="batch-btn-compact">
          <el-icon><VideoPlay /></el-icon>
          批量启动
        </el-button>
        <el-button type="danger" @click="handleBatchDelete" class="batch-btn-compact">
          <el-icon><Delete /></el-icon>
          批量删除
        </el-button>
        <el-button type="primary" @click="handleBatchConfig" class="batch-btn-compact">
          <el-icon><Setting /></el-icon>
          批量配置
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <el-card shadow="hover" class="table-card">
        <template #header>
          <div class="table-header">
            <div class="table-title">
              <el-icon><List /></el-icon>
              <span>数据列表（演示）</span>
            </div>
            <div class="table-header-actions">
              <el-button type="success" @click="handleRefresh" class="refresh-btn" size="small">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
              <div class="table-info">
                <!-- 合并的分页信息控制 -->
                <div class="pagination-control-wrapper" @click="paginationExpanded = !paginationExpanded">
                  <span class="page-count">本页 {{ tableData.length }} 条</span>
                  <div class="divider"></div>
                  <span class="pagination-info">{{ currentPage }}/{{ Math.ceil(total / pageSize) }}</span>
                  <el-icon class="pagination-icon" :class="{ 'expanded': paginationExpanded }">
                    <ArrowDown />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </template>
        
        <div class="table-container">
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          height="600"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="name" label="名称" min-width="200" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 'enabled' ? 'success' : 'info'">
                {{ row.status === 'enabled' ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="180" />
          <el-table-column label="操作" width="220" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-tooltip content="查看详情" placement="top">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleView(row)"
                    circle
                  >
                    <el-icon><View /></el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <el-button
                    type="success"
                    size="small"
                    @click="handleEdit(row)"
                    circle
                  >
                    <el-icon><Edit /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
        </div>
        
        <!-- 分页折叠区域 -->
        <transition name="pagination-slide">
          <div v-show="paginationExpanded" class="pagination-section">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
            />
          </div>
        </transition>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search, Refresh, Select, Remove, VideoPlay, Delete, Setting,
  List, View, Edit, ArrowDown
} from '@element-plus/icons-vue'

// 搜索表单
const searchForm = reactive({
  name: '',
  status: ''
})

// 表格数据
const selectedItems = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(50)
const paginationExpanded = ref(false)

const tableData = ref([
  { id: 1, name: '任务-001', status: 'enabled', created_at: '2024-01-15 10:30:00' },
  { id: 2, name: '任务-002', status: 'disabled', created_at: '2024-01-15 11:20:00' },
  { id: 3, name: '任务-003', status: 'enabled', created_at: '2024-01-15 14:45:00' },
  { id: 4, name: '任务-004', status: 'enabled', created_at: '2024-01-16 09:15:00' },
  { id: 5, name: '任务-005', status: 'disabled', created_at: '2024-01-16 16:30:00' },
  { id: 6, name: '任务-006', status: 'enabled', created_at: '2024-01-17 08:00:00' },
  { id: 7, name: '任务-007', status: 'enabled', created_at: '2024-01-17 13:40:00' },
  { id: 8, name: '任务-008', status: 'disabled', created_at: '2024-01-18 10:10:00' },
  { id: 9, name: '任务-009', status: 'enabled', created_at: '2024-01-18 15:25:00' },
  { id: 10, name: '任务-010', status: 'enabled', created_at: '2024-01-19 11:50:00' }
])

// 搜索和重置
const handleSearch = () => {
  ElMessage.success('搜索完成（演示模式）')
}

const handleReset = () => {
  searchForm.name = ''
  searchForm.status = ''
  ElMessage.info('已重置搜索条件（演示模式）')
}

// 刷新
const handleRefresh = () => {
  ElMessage.success('刷新成功（演示模式）')
}

// 表格选中变化
const handleSelectionChange = (selection) => {
  selectedItems.value = selection
}

// 批量操作
const handleBatchStop = async () => {
  try {
    await ElMessageBox.confirm(
      `确认要停止选中的 ${selectedItems.value.length} 项吗？`,
      '批量停止确认',
      { type: 'warning' }
    )
    ElMessage.success(`批量停止完成：${selectedItems.value.length} 项（演示模式）`)
    selectedItems.value = []
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量停止失败（演示模式）')
    }
  }
}

const handleBatchStart = async () => {
  try {
    await ElMessageBox.confirm(
      `确认要启动选中的 ${selectedItems.value.length} 项吗？`,
      '批量启动确认',
      { type: 'warning' }
    )
    ElMessage.success(`批量启动完成：${selectedItems.value.length} 项（演示模式）`)
    selectedItems.value = []
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量启动失败（演示模式）')
    }
  }
}

const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm(
      `确认要删除选中的 ${selectedItems.value.length} 项吗？此操作不可撤销！`,
      '批量删除确认',
      { type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消' }
    )
    ElMessage.success(`批量删除完成：${selectedItems.value.length} 项（演示模式）`)
    selectedItems.value = []
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量删除失败（演示模式）')
    }
  }
}

const handleBatchConfig = () => {
  ElMessage.info(`批量配置 ${selectedItems.value.length} 项（演示模式）`)
}

// 单条操作
const handleView = (row) => {
  ElMessage.info(`查看详情：${row.name}（演示模式）`)
}

const handleEdit = (row) => {
  ElMessage.info(`编辑：${row.name}（演示模式）`)
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  ElMessage.info(`每页显示 ${val} 条（演示模式）`)
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  ElMessage.info(`切换到第 ${val} 页（演示模式）`)
}
</script>

<style scoped>
/* 组件容器 */
.batch-only-demo {
  margin-top: 20px;
}

/* 搜索区域 */
.search-section {
  margin-bottom: 20px;
}

.search-card {
  border-radius: 16px;
}

.search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.search-title .el-icon {
  color: #409eff;
}

.search-form-content {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.search-form-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1;
}

.search-form-actions {
  display: flex;
  gap: 8px;
}

/* 批量操作工具栏 - 紧凑样式，保持渐变背景 */
.batch-actions-bar {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  animation: slideInDown 0.3s ease;
}

/* 选择指示器 - 白色文字 */
.batch-info-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* 分隔符 */
.batch-divider {
  color: white;
  font-size: 16px;
  opacity: 0.6;
  margin: 0 4px;
}

.batch-info-compact .selected-icon {
  font-size: 16px;
  color: white;
}

.batch-info-compact strong {
  font-weight: 600;
  margin: 0 2px;
}

/* 批量操作按钮组 - 紧密排列 */
.batch-buttons-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.batch-btn-compact {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
}

.batch-btn-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.batch-btn-compact:active {
  transform: translateY(0);
}

/* 按钮类型样式 - 在渐变背景上使用更鲜明的颜色 */
.batch-btn-compact.el-button--warning {
  background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
  color: white;
}

.batch-btn-compact.el-button--success {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  color: white;
}

.batch-btn-compact.el-button--danger {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  color: white;
}

.batch-btn-compact.el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  color: white;
}

.batch-btn-compact .el-icon {
  margin-right: 4px;
  font-size: 16px;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 表格区域 */
.table-section {
  margin-bottom: 24px;
}

.table-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.table-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.table-title .el-icon {
  color: #409eff;
}

.table-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.refresh-btn {
  background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.refresh-btn:hover {
  background: linear-gradient(135deg, #85CE61 0%, #67C23A 100%);
  box-shadow: 0 6px 20px rgba(103, 194, 58, 0.4);
  transform: translateY(-2px);
  color: #fff;
}

/* 合并的分页控制容器 */
.pagination-control-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(64, 158, 255, 0.08);
  border: 1px solid rgba(64, 158, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  font-size: 12px;
  height: 24px;
}

.pagination-control-wrapper:hover {
  background: rgba(64, 158, 255, 0.12);
  border-color: rgba(64, 158, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

.page-count {
  font-size: 12px;
  font-weight: 500;
  color: #909399;
  line-height: 1;
}

.divider {
  width: 1px;
  height: 12px;
  background: rgba(64, 158, 255, 0.3);
  margin: 0 2px;
}

.pagination-info {
  font-size: 12px;
  font-weight: 500;
  color: #409eff;
  letter-spacing: 0.5px;
  min-width: 24px;
  text-align: center;
  line-height: 1;
}

.pagination-icon {
  font-size: 12px;
  color: #409eff;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-icon.expanded {
  transform: rotate(180deg);
}

.table-container {
  width: 100%;
  overflow-x: visible;
  margin: 0 auto;
  border-radius: 12px;
  background: #fff;
}

.pagination-section {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.pagination-section .el-pagination {
  display: flex;
  justify-content: center;
}

/* 分页折叠动画 */
.pagination-slide-enter-active,
.pagination-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-slide-enter-from,
.pagination-slide-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.pagination-slide-enter-to,
.pagination-slide-leave-from {
  opacity: 1;
  max-height: 300px;
  margin-top: 0;
  padding-top: 16px;
}

/* 操作按钮样式优化 */
.action-buttons {
  display: flex;
  gap: 12px;  /* 基础间距：12px */
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center;
}

/* 确保所有包装元素不影响间距 - 只重置上下和右的 margin，保留左 margin 用于控制间距 */
.action-buttons > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  margin-left: 0;
  padding: 0;
  display: inline-flex;
}

/* 确保 el-tooltip 包装元素不影响间距 */
.action-buttons > :deep(.el-tooltip) {
  display: inline-flex;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  margin-left: 0;
  padding: 0;
}

.action-buttons :deep(.el-tooltip__trigger) {
  display: inline-flex;
  margin: 0 !important;
  padding: 0;
}

.action-buttons .el-button {
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-buttons .el-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-buttons .el-button:active {
  transform: translateY(0) scale(0.98);
}

.action-buttons .el-button--primary {
  background: linear-gradient(135deg, #409EFF 0%, #66B3FF 100%);
  border: none;
}

.action-buttons .el-button--success {
  background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
  border: none;
}
</style>

